<template>
  <el-form label-width="80px" label-position="right">
    <el-row>
      <el-col :span="12">
        <el-form-item label="请求地址">
          <el-input v-model="requestInfo.requestUrl" placeholder="请求地址">
            <el-select slot="prepend" value="" v-model="requestInfo.requestType" placeholder="请求类型" style="width: 100px">
              <el-option value="GET">GET</el-option>
              <el-option value="POST">POST</el-option>
              <el-option value="PUT">PUT</el-option>
              <el-option value="DELETE">DELETE</el-option>
            </el-select>
            <el-checkbox slot="append" v-model="requestInfo.checkToken" style="width: 100px">
              令牌检查
            </el-checkbox>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="结果属性">
          <el-input v-model="requestInfo.resultProp" placeholder="请求结果中取值" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6"><el-form-item label="缓存标识"><el-input v-model="requestInfo.cacheKey" clearable  /></el-form-item></el-col>
    </el-row>
    <template v-if="requestInfo.trigger === 'source'">
      <el-row v-if="['table'].includes(labDesign.activity.render)">
        <el-col :span="6"><el-form-item label="表格数量"><el-input v-model="requestInfo.totalProp" clearable /></el-form-item></el-col>
        <el-col :span="6"><el-form-item label="表格数据"><el-input v-model="requestInfo.dataProp" clearable  /></el-form-item></el-col>
      </el-row>
      <el-row v-else-if="!['form'].includes(labDesign.activity.render)">
        <el-col :span="6"><el-form-item label="选项名称"><el-input v-model="requestInfo.labelProp" clearable /></el-form-item></el-col>
        <el-col :span="6"><el-form-item label="选项值"><el-input v-model="requestInfo.valueProp" clearable /></el-form-item></el-col>
        <el-col :span="6"><el-form-item label="选项编码"><el-input v-model="requestInfo.codeProp" clearable /></el-form-item></el-col>
        <el-col :span="6"><el-form-item label="搜索属性"><el-input v-model="requestInfo.searchProp" clearable /></el-form-item></el-col>
      </el-row>
    </template>

    <el-form-item style="text-align: center;margin-bottom: 2px!important;" label-width="0">
      <el-button-group>
        <el-button type="primary" icon="el-icon-video-play" @click="callRequest" :loading="loading">执行请求</el-button>
        <el-button type="success" icon="el-icon-circle-plus-outline" :loading="loading" @click="$emit('save')">保存请求</el-button>
      </el-button-group>
    </el-form-item>
    <el-form-item label-width="0">
      <el-tabs v-model="activeName">
        <el-tab-pane label="请求参数" name="methodBody">
          <el-form-item v-if="requestInfo.trigger === 'source'" label="过滤属性" style="margin-top: 8px">
            <el-input v-model="requestInfo.bodyFilter"></el-input>
          </el-form-item>
          <div class="lab-method">
            <el-table :data="requestInfo.params" height="400px" max-height="400px">
              <el-table-column label="名称" align="center" prop="label">
                <el-input slot-scope="scope" v-model="scope.row[scope.column.property]"></el-input>
              </el-table-column>
              <el-table-column label="属性" align="center" prop="prop">
                <el-input slot-scope="scope" v-model="scope.row[scope.column.property]"></el-input>
              </el-table-column>
              <el-table-column label="类型" align="center" prop="type">
                <el-select slot-scope="scope" v-model="scope.row[scope.column.property]" placeholder="参数值类型" clearable>
                  <el-option v-for="item in valueTypes" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </el-table-column>
              <el-table-column label="位置" align="center" prop="location">
                <template slot-scope="scope">
                  <el-select  v-model="scope.row[scope.column.property]" placeholder="参数位置" clearable>
                    <el-option v-for="item in locations" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="取值属性" align="center" prop="mapper">
                <el-input slot-scope="scope" v-model="scope.row[scope.column.property]"></el-input>
              </el-table-column>
              <el-table-column label="默认值" align="center" prop="value">
                <el-input slot-scope="scope" v-model="scope.row[scope.column.property]">
                  <el-select v-if="scope.row.location === 'filter'" slot="append" v-model="scope.row.op" clearable style="width: 80px">
                    <el-option v-for="item in filterOps" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </el-input>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot="header" slot-scope="scope">
                  <el-button v-if="scope" type="primary" @click="() => { requestInfo.params.splice(0,0,{label:'新参数' }) }">添加</el-button>
                </template>
                <template slot-scope="scope">
                  <el-button type="danger" icon="el-icon-delete" circle @click="requestInfo.params.splice(scope.$index, 1)" title="删除"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="测试参数" name="testArgs" lazy>
          <div class="lab-method">
            <lab-code ref="argRef" v-model="testCase.caseJson" :config="{ language:'json' }" style="height: 410px" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="测试结果" name="testResult" lazy>
          <div class="lab-method">
            <lab-code ref="resultRef" v-model="testCase.resultTxt" :config="{ language:'json' }" style="height: 410px" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form-item>
  </el-form>
</template>

<script>
import LabDesign from "../../../mixins/LabDesign";
import LabRequest from "../../../mixins/LabRequest";
export default {
  name: "RequestConfig",
  mixins: [LabDesign, LabRequest],
  props: {
    requestInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'methodBody',
      testCase: { caseJson: {}, resultTxt: {} },
      loading: false,
      locations: [ { value: 'path',label: '路径'},{ value: 'query',label: '参数'},{ value: 'header',label: '请求头'},{ value: 'body',label: '请求体'},{ value: 'filter',label: '过滤参数'} ],
      valueTypes: [ { value: 'Object',label: '对象'},{ value: 'Array',label: '数组'},{ value: 'Number',label: '数字'},{ value: 'String',label: '字符串'} ],
      filterOps: [ { value: '=',label: '等于'},{ value: '>',label: '大于'},{ value: '<',label: '小于'},{ value: 'like',label: '包含'},{ value: 'in',label: '列表中'} ],
    }
  },
  methods: {
    callRequest(){
      this.loading = true
      this.execRequest(this.requestInfo, this.testCase.caseJson, this.testCase.caseJson, true)
      .then(res => {
        this.activeName = 'testResult'
        this.$set(this.testCase, 'resultTxt', this.$Util.toObject(res))
        if (this.$refs.resultRef) {
          this.$refs.resultRef.setValue(this.testCase.resultTxt)
        }
        setTimeout(() => {
          this.loading = false
        }, 100)
      })
    }
  }
}
</script>

<style scoped>

</style>
